<template>
    <view v-if="list.length > 0" class="app">
        <view class="box">
            <view v-for="(item, index) in list" :key="index" class="list-item">
                <view>
                    <view class="font-30 ellipsis">{{ $t('payDetailPage.orderNumber') }}: {{ item.order_sn }}</view>
                    <view class="font-36">{{ item.order_amount }}</view>
                </view>
                <view>
                    <view class="font-26">{{ item.pay_time }}</view>
                    <view class="font-26">{{ item.total_amount }}</view>
                </view>
            </view>
        </view>
        <!-- <no-more v-model="have" @more="more"></no-more> -->
        <view v-if="!have" class="no-more">{{ $t('noMoreTips') }}</view>
    </view>
    <view v-else><no-data></no-data></view>
</template>

<script>
    export default {
        data() {
            return {
                list: [],
                page: 1,
                have: true
            }
        },
        mounted() {
            this.get_list()
        },
        onLoad() {
            uni.setNavigationBarTitle({
                title: this.$i18n.t('payDetailPage.navigationBarTitle')
            })
        },
        methods: {
            get_list() {
                // api/user/seller_list api/User/sale_list
                uni.showLoading({
                    title: '加载中...'
                })
                this.$http('get|api/user/seller_list', {
                        p: this.page
                    })
                    .then(res => {
                        uni.hideLoading()
                        if (res.result.seller_list.length === 0) {
                            this.have = false
                            return
                        }
                        this.list = [...this.list, ...res.result.seller_list]
                        console.log(this.list)
                    })
                    .catch(res => {
                        uni.hideLoading()
                        console.log('catch', res)
                    })
            },
            more() {
                if (this.have) {
                    this.page += 1
                    this.get_list()
                }
            }
        },
        onReachBottom() {
            this.more()
        }
    }
</script>

<style lang="scss">
    .app {
        height: 101vh;
    }

    .list-item {
        height: 148rpx;
        padding: 30rpx;
        box-sizing: border-box;
        border-bottom: 1rpx solid #f3f3f3;

        >view {
            display: flex;
            justify-content: space-between;
        }

        .font-30 {
            max-width: 500rpx;
        }

        .font-26 {
            color: #999999;
        }

        .font-36 {
            color: #ff4c57;
        }
    }

    .no-more {
        color: #999999;
        height: 80rpx;
        text-align: center;
        line-height: 80rpx;
        font-size: 26rpx;
        background-color: #f7f7f7;
    }
</style>